<template>
    <div class="manage">
        <!-- 判断属性是不是等于add -->
        <div class="manage-header">
            <common-form
                    :formLabel="formLabel"
                    :form="searchForm"
                    :inline="true"
                    ref="form"
            >
                <!-- 人员查询 -->
                <el-button type="primary" @click="getList(searchForm.keyword)">搜索</el-button>
            </common-form>
        </div>

        <common-table
                :tableData="tableData"
                :tableLabel="tableLabel"
                :config="config"
                @changePage="getList()"
                @edit="editUser"
                @del="delUser"
        ></common-table>

    </div>
</template>

<script>
import CommonForm from "../../../src/components/CommonForm.vue";
import CommonTable from '../../../src/components/Fangke.vue';
import {getUser} from '../../../api/data'
export default {
    name: "pageOne",
    components: {
        CommonForm,
        CommonTable,
    },
    data() {
        return {
            operateType: "add",
            isShow: false,
            opertateFormLabel: [
                {

                },
                {
                    model: "name",
                    label: "姓名",
                    type: "input",
                },
                {
                    model: "age",
                    label: "年龄",
                    type: "input",
                },
                {
                    model: "sex",
                    label: "性别",
                    type: "select",
                    opts: [
                        {
                            label: "男",
                            value: 1,
                        },
                        {
                            label: "女",
                            value: 0,
                        },
                    ],
                },
                {
                    model: "birth",
                    label: "出生日期",
                    type: "date",
                },
                {
                    model: "addr",
                    label: "地址",
                    type: "input",
                },
            ],
            operateForm: {
                name: "",
                addr: "",
                age: "",
                birth: "",
                sex: "",
            },
            formLabel: [
                {
                    model: "keyword",
                    label: "",
                    type: "input",
                },
            ],
            searchForm: {
                keyword: "",
            },
            tableData: [],
            tableLabel: [
                {
                    prop: "id",
                    label: '访客编号',
                },
                {
                    prop: "username",
                    label: '用户名',
                },
                {
                    prop: "name",
                    label: '姓名',
                },
                {
                    prop: "profile",
                    label: '头像',
                },
                {
                    prop: "phone",
                    label: '电话号码',
                },
                {
                    prop: "emergencyPerson",
                    label: '紧急联系人',
                },
                {
                    prop: "emergencyPerson",
                    label: '紧急联系电话',
                },
            ],
            config:{
                page: 1,
                total: 30
            }
        };
    },
    methods: {
        confirm() {
            if (this.operateType === "edit") {
                this.$http.post("/user/edit", this.operateForm).then((res) => {
                    console.log(res);
                    this.isShow = false;
                    this.getList()
                });
            } else {
                this.$http.post("/user/add", this.operateForm).then((res) => {
                    console.log(res);
                    this.isShow = false;
                    this.getList()
                });
            }
        },
        addUser() {
            this.isShow = true;
            this.operateType = "add";
            this.operateForm = {
                name: "",
                addr: "",
                age: "",
                birth: "",
                sex: "",
            };
        },
        editUser(row){
            this.operateType = 'edit'
            this.isShow = true
            // row表示当前行的数据
            this.operateForm = row //数据回写
        },
        delUser(row) {
            //通知栏组件
            this.$confirm("此操作将永久删除该组件，是否继续？", "提示", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning" //弹窗类型
            }).then(() => {
                const id = row.id
                this.$http.post("/user/del", {
                    params: {id}
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                    this.getList()
                })
            })
        },
        getList(name = '') {
            this.config.loading = true
            name ? (this.config.page = 1) : ''  //分页名字存在初始页为1
            // 接口调用
            getUser({
                page: this.config.page,
                name
            }).then(res => {
                this.tableData = res.list.map(item => {
                    item.sexLabel = item.sex === 0 ? '女' : '男'
                    return item
                })
                this.config.total = res.count
                this.config.loading = false
            })
        },
    },
    created() {
        this.getList()
    }
};
</script>

<style lang="less" scoped>
.manage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.common-table {
  margin-top: 35px;
  height: 465px;
}
</style>
